﻿@using MvcSimpleQuery.Html
@model MvcSimpleQuery.QueryTree.Condition
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="example" class="k-content">
    <div id="window"> 
        <style type="text/css">
            /*Kendo UI conflicts with bootstrap moz-box-sizing*/
            #QueryWindow * {
                -moz-box-sizing: border-box;
                box-sizing:border-box;
            }

        </style>
        <script type="text/javascript">
            var queryTree = {};
            var ds;
            function clearQuery(e) {
                queryTree = {};
                ds.read();

            }
            function buildQuery(e) {
                queryTree = e.originalEvent.detail.conditions;
                ds.read();
            }
            function SQReadCallBack(result) {
                var bla = result;

            }
        </script>

        @(Html.SimpleQuery().Fields<Customer>(fb =>
        {
            fb.Add(x => x.Address);
            fb.Add(x => x.City);
            fb.Add(x => x.CompanyName);
            fb.Add(x => x.ContactName);
            fb.Add(x => x.ContactTitle);


        }).Named("SimpleQuery")
        .Events(x => x.OnBuild("buildQuery").OnClear("clearQuery")) 
        .AutoDrop(true)
                .Read(url => url.Action("Customers", "SimpleQuery"))
        )
    </div>
    <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>
    <div id="clientsDb">

        <div id="grid" style="height: 380px"></div>

    </div>
    <style scoped>
        #clientsDb {
            width: 100%;
            height: 413px;
            margin: 30px auto;
            padding: 51px 4px 0 4px;
            background: url('../../content/web/grid/clientsDb.png') no-repeat 0 0;
        }

        #example {
            min-height: 500px;
        }

        #undo {
            text-align: center;
            position: absolute;
            white-space: nowrap;
            padding: 1em;
            cursor: pointer;
        }

        .armchair {
            float: left;
            margin: 30px 30px 120px 30px;
            text-align: center;
        }

            .armchair img {
                display: block;
                margin-bottom: 10px;
            }
    </style>
    <script>

        $(document).ready(function () {

            var window = $("#window"),
                       undo = $("#undo")
                               .bind("click", function () {
                                   window.data("kendoWindow").open();
                                   undo.hide();
                               });

            var onClose = function () {
                undo.show();
            }

            if (!window.data("kendoWindow")) {
                window.kendoWindow({
                    width: "600px",
                    title: "Simple Query",
                    visible: true,
                    actions: [
                        "Pin",
                        "Minimize",
                        "Maximize",
                        "Close"
                    ],
                    close: onClose
                });
            }


            ds = new kendo.data.DataSource({
                dataType: 'json'
              , type: "POST"
              , transport: {
                  read: function (options) {
                      $.ajax({
                          type: "POST",
                          url: "@Url.Action("Customers","SimpleQuery")",
                          contentType: "application/json; charset=utf-8",
                          dataType: "Json",
                          data: JSON.stringify(queryTree),
                          success: function (result) {
                              options.success(result);
                          }
                      });
                  }
              }

            });
            var grid = $("#grid").kendoGrid({
                dataSource: ds,
                groupable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    field: "ContactName",
                    title: "Contact Name",
                    width: 140
                }, {
                    field: "ContactTitle",
                    title: "Contact Title",
                    width: 190
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 110
                }]
            });
        });

    </script>
</div>
